<template>
  <el-container class="login-one">
    <el-header></el-header>
    <el-main>
        <br><br><br><br><br><br><br>
       <el-row>
            <el-col :span="8">&nbsp;</el-col>
            <el-col :span="8" style="background-color: white;border-radius: 5px;">
              <br>
              <h1 align="center">用户登录</h1>
              <br>
              <el-form :model="userInfo" label-width="100px">
                <el-form-item label="用户:">
                  <el-col :span="20">
                    <el-input v-model="userInfo.userName" ></el-input>
                  </el-col>

                </el-form-item>

                <el-form-item label="密码:">
                  <el-col :span="20">
                    <el-input v-model="userInfo.userPwd" show-password></el-input>
                  </el-col>
                </el-form-item>

                <el-form-item >
                  <el-col :span="10">
                       <input type="checkbox" @click="remerber" v-model="isSelect"></input>记住
                  </el-col>
                  <el-col :span="10">
                    <input type="checkbox" @click="autoLogin" v-model="isLogin"></input>自动登录
                  </el-col>
                </el-form-item>

                <el-form-item >
                  <el-button type="success" icon="el-icon-user-solid" size="mini" @click="login">登录</el-button>
                  <el-button type="success" icon="el-icon-remove" size="mini">考生注册</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="8">&nbsp;</el-col>
       </el-row>

    </el-main>
  </el-container>
</template>

<script>
    export default {
        name: "Login",
        data(){
           return{
               isSelect:false,//复选框选中状态的值
               isLogin:false,
               userInfo:{
                    userName:"",
                    userPwd:""
               }
           }
        },
       methods:{
              login(){
                    //把JS对象转换成文本
                   var u = JSON.stringify(this.userInfo);
                   localStorage.setItem("user",u);
                //设置登录状态
                localStorage.setItem("status","0");
                   this.$router.push("/main");

              },
             remerber(){//记住
                console.log("值是："+this.isSelect)
                if(!this.isSelect){
                  var u = JSON.stringify(this.userInfo);
                  localStorage.setItem("u",u);
                }else{
                  //删除本地存储
                  localStorage.removeItem("u");
                }
            },
            autoLogin(){//自动登录
                  //被选中
                  if(!this.isLogin){
                     //设置是否需要自动登录
                     localStorage.setItem("isLogin","1");
                  } else{
                    localStorage.setItem("isLogin","0");
                  }
            }
       },
      created() {
            //判断本地存储是否有值
           var obj = localStorage.getItem("u");
           //如果有值，设置复选框选中和赋值给用户对象
           if(obj!=null){
             //设置复选框选中
             this.isSelect=true;
             //赋值给用户对象
             this.userInfo = JSON.parse(localStorage.getItem("u"));

           }
           //判断是否需要自动登录
           var isLogin = localStorage.getItem("isLogin");
           if(isLogin=="1"){
              //登录
             this.login();
           }



      }
    }
</script>

<style>
  html,body{
    margin: 0px;
    height: 100%;
  }
  .login-one{
    background-color:#1c77ac;
    background-image:url(../../assets/light.png);
    background-repeat:no-repeat;
    overflow:hidden;
    height: 100%;
  }
</style>
